<!-- Dom模板 -->
<template>
  <div class="cover">
    <!-- Dom内容 -->
    <div class="alert">
        <div class="top">
          <p class="title">查看角色详情</p>
          <p class="close" @click="setDetailsAlert(false)">×</p>
        </div>
        <div class="con">
          <p><span>角色名称：</span>{{detailsVal.name}}</p>
          <p><span>所属组织：</span>{{detailsVal.organization}}</p>
          <p>
            <span>状态：</span>
            <select ref="state">
              <option :value="detailsVal.state==='1'?'启用':'未启用'">{{detailsVal.state==='1'?'启用':'未启用'}}</option>
              
            </select>
          </p>
          <p>
            <span>权限：</span>
            <select ref="jurisdiction">
              <option :value="detailsVal.name">{{detailsVal.name}}</option>
              
            </select>
          </p>
        </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import {mapMutations,mapState,mapActions} from "vuex"

export default {
  name: '',
  props:["detailsVal"],
  data() {
    return {
      
    }
  },
  computed:{
    ...mapState({
      roleAdministratorState:'roleAdministrator'
    })
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      console.log(this.detailsVal);
  },
  // Vue方法定义
  methods: {
      ...mapMutations({
        setDetailsAlert:'roleAdministrator/setDetailsAlert',
      }),
      


      okBtn(res){
        this.setDetailsAlert(false)
      }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
.cover{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,.3)
}
.alert{
    width:700px;
    max-height:500px;
    background:#fff;
    position:fixed;
    left:50%;
    top:50%;
    margin-top:-250px;
    margin-left:-350px;
    padding-bottom:20px;
}
/* top */
.alert .top{
  width:100%;
  height:50px;
  display:flex;
  align-items: center;
  justify-content: space-between;
}
.alert .top .title{
    margin:0 auto;
}
.alert .top .close{
    font-size:30px;
    padding-right:10px;
}
/* con */
.alert .con{
  margin:0 200px;
}
.alert .con p{
  height:50px;
  display:flex;
  align-items: center;
}
.alert .con p span{
  display: inline-block;
  width:100px;
  text-align: left;
}
.alert .con p input,.alert .con p select{
  width:200px;
  height:30px;
}

</style>